let homePage = document.querySelector(".home-page");
let listCitypageMain = document.querySelector(".list-citypage-main");
let calendarPageMain = document.querySelector(".calendar-page-main");
let keywordPageMain = document.querySelector(".keyword-page-main");
let listPageContainer = document.querySelector(".list-page-container");

//首页返回
let gobackhome = document.querySelector(".home-page .page-header .page-header-back")
gobackhome.onclick = () => {
    location.href = "City-Travel-homepage.html"
}

//城市
//城市选择
let cityName = document.querySelector(".city-name");
cityName.onclick = () => {
    homePage.classList.add("none")
    listCitypageMain.classList.remove("none")
}
//城市切换
let cityBoxes = document.querySelector(".city-boxes");
let label = cityBoxes.querySelectorAll(".label");
label.forEach(item => {
    item.onclick = () => {
        homePage.classList.remove("none")
        listCitypageMain.classList.add("none")
        cityName.children[0].innerHTML = item.innerText
    }
})
//城市返回
let CityBackBtn = listCitypageMain.querySelector(".back-btn");
CityBackBtn.onclick = () => {
    if(CityBackBtn.parentNode.nextElementSibling.classList.contains("none")){
        cityBoxes.classList.remove("none");
        cityBoxes.nextElementSibling.classList.add("none")
    }else{
        homePage.classList.remove("none")
        listCitypageMain.classList.add("none")
    }
}
//城市搜索
let cityInput = document.querySelector("#cityInput");
cityInput.oninput = () => {
    cityBoxes.classList.add("none");
    cityBoxes.nextElementSibling.classList.remove("none")
    cityInput.nextElementSibling.classList.remove("none")
}
//城市搜索内容删除
cityInput.nextElementSibling.onclick = () => {
    cityInput.value = ''
    cityBoxes.classList.remove("none");
    cityBoxes.nextElementSibling.classList.add("none")
}

//附近
let ntxt = document.querySelector(".n-txt")
let mark = document.querySelector("#mark")
let mbtn = mark.querySelector(".btn")
ntxt.onclick = () => {
    mark.classList.remove("none")
}
mbtn.onclick = () => {
    mark.classList.add("none")
}

//日期
let date = document.querySelector(".date")
let goback = document.querySelector(".goback")
date.onclick = () => {
    homePage.classList.add("none")
    calendarPageMain.classList.remove("none")
}
goback.onclick = () => {
    homePage.classList.remove("none")
    calendarPageMain.classList.add("none")
}

//酒店
//酒店选择
let keywordName = document.querySelector(".keyword-name");
keywordName.onclick = () => {
    homePage.classList.add("none")
    keywordPageMain.classList.remove("none")
}
//酒店展开
let iconMore = document.querySelectorAll(".icon-more")
let t = true
iconMore.forEach(item => {
    item.onclick = () => {
        item.parentNode.nextElementSibling.classList.toggle("max-height")
        item.classList.toggle("icon-more-up")
        if(t){
            t = false
            item.innerText = '收起'
        } else {
            t = true
            item.innerText = '展开'
        }
    }
})

//酒店切换
let hotKeywordsBoxes = document.querySelector(".hot-keywords-boxes");
let boxItem = hotKeywordsBoxes.querySelectorAll(".box-item");
boxItem.forEach(item => {
    item.onclick = () => {
        homePage.classList.remove("none")
        keywordPageMain.classList.add("none")
        keywordName.innerHTML = item.children[0].innerText
        keywordName.classList.remove("placeholder")
    }
})
//酒店返回
let CityBackBtn1 = keywordPageMain.querySelector(".back-btn");
CityBackBtn1.onclick = () => {
    if(CityBackBtn1.parentNode.nextElementSibling.classList.contains("none")){
        hotKeywordsBoxes.classList.remove("none");
        hotKeywordsBoxes.nextElementSibling.classList.add("none")
    }else{
        homePage.classList.remove("none")
        keywordPageMain.classList.add("none")
    }
}
//酒店搜索
let keyInput = document.querySelector("#keyInput");
let oneResult = keywordPageMain.querySelector(".list-keywordpage-main .search-result .one-result")
let str;
keyInput.oninput = () => {
    hotKeywordsBoxes.classList.add("none");
    hotKeywordsBoxes.nextElementSibling.classList.remove("none")
    keyInput.nextElementSibling.classList.remove("none")+
    // console.log(keyInput.value);
    axios.get("http://localhost:3001/fuzzy_search_list", {
        params: {
            txt: keyInput.value
        }
    }).then(res => {
        console.log(res);
        str = ''
        res.data.data.forEach(item => {
            str += `
                <div class="result-item">
                    <div class="it-category it-icon it-icon4">+
                            <span class="taro-text t-text">酒店</span>
                    </div>
                    <div class="it-wrap it-hotel">
                        <div class="it-hotel-info">
                            <div class="it-words">
                                    <div class="txt">
                                            <span class="taro-text">${item.title}</span>
                                    </div>
                                    <div class="it-hlvl">
                                            <span class="taro-text t-text">$item.type{}</span>
                                    </div>
                            </div>
                            <div class="it-hinfo-wrap">
                                    <div class="it-hinfo">
                                            <div class="it-hinfo-inn">
                                                    <span class="taro-text it-hscore t-text">${item.num}分</span>
                                                    <span class="taro-text it-hloc t-text">${item.place}</span>
                                            </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
        })
        oneResult.innerHTML = str
    }).catch(err => {
        console.log(err);
    })
}
//酒店搜索内容删除
keyInput.nextElementSibling.onclick = () => {
    keyInput.value = ''
    hotKeywordsBoxes.classList.remove("none");
    hotKeywordsBoxes.nextElementSibling.classList.add("none")
}


//价格
let priceName = document.querySelector(".price-name")
let pricestarModelMain = document.querySelector(".price-star-model-main")
priceName.onclick = () => {
    pricestarModelMain.classList.remove("none")
}
//价格返回
let goback2 = pricestarModelMain.querySelector(".submit")
goback2.onclick = () => {
    let pContent = pricestarModelMain.querySelectorAll(".on")
    pricestarModelMain.classList.add("none")
    let str = pContent[0].innerText + "," + pContent[1].innerText
    priceName.classList.remove("placeholder")
    priceName.innerHTML = str
}
//价格取消
let goback3 = pricestarModelMain.querySelector(".cancel")
goback3.onclick = () => {
    pricestarModelMain.classList.add("none")
}
//价格切换
let pStar = pricestarModelMain.querySelectorAll(".star .l-item")
let pPrice = pricestarModelMain.querySelectorAll(".price .l-item")
pStar.forEach(item => {
    item.onclick = () => {
        for(let i = 0; i < pStar.length; i++){
            pStar[i].classList.remove("on")
        }
        item.classList.add("on")
    }
})
pPrice.forEach(item => {
    item.onclick = () => {
        for(let i = 0; i < pPrice.length; i++){
            pPrice[i].classList.remove("on")
        }
        item.classList.add("on")
    }
})

//电话
let oItem = document.querySelectorAll(".o-item")
let phonePopModel = document.querySelector(".phone-pop-model")
oItem[2].onclick = () => {
    phonePopModel.classList.remove("none")
}
//电话取消
let oclose = phonePopModel.querySelector(".close")
oclose.onclick = () => {
    phonePopModel.classList.add("none")
}

//搜索
let searchBtn = document.querySelector(".search-btn")
searchBtn.onclick = () => {
    homePage.classList.add("none")
    listPageContainer.classList.remove("none")
}
// let wind = document.querySelector(".taro-scroll")
// window.onscroll = () => {
//     let top = document.documentElement.scrollTop || document.body.scrollTop;
//     console.log(top);
// }
